import { ref, reactive } from 'vue'
import { MENU_TYPE, MENU_STATUS, MENU_VISIBLE } from '@/utils/dictionary.js'
const menuOptions = ref()
const disCode = ref(true)
const disMenu = ref(false)

export const form = reactive({
  menuForm: {
    parentId: null,
    type: 0,
    name: null,
    code: null,
    path: null,
    component: null,
    isHidden: 0,
    status: 1,
    clientId: 'tuoheng-airmonitor-admin'
  },
  menuRules: {
    sort: [{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }]
  },
  formItem: [
    { type: 'tree-select', key: 'parentId', label: '上级菜单', props: { options: menuOptions, labelField: 'name', keyField: 'id', placeholder: '请选择上级菜单', clearable: true }},
    { type: 'radio', key: 'type', label: '菜单类型', options: MENU_TYPE },
    { type: 'input', key: 'name', label: '菜单名称', props: { maxlength: '20', placeholder: '请输入菜单名称', clearable: true }},
    { type: 'input', key: 'code', label: '权限标识', props: { maxlength: '200', disabled: disCode, placeholder: '请输入权限标识', clearable: true }},
    { type: 'input', key: 'path', label: '路由地址', props: { maxlength: '200', disabled: disMenu, placeholder: '请输入路由地址', clearable: true }},
    { type: 'input', key: 'component', label: '组件路径', props: { maxlength: '200', disabled: disMenu, placeholder: '请输入组件路径', clearable: true }},
    { type: 'number', key: 'sort', label: '排序号', props: { min: 0, placeholder: '请输入排序号', showButton: false, clearable: true }},
    { type: 'radio', key: 'isHidden', label: '是否可见', options: MENU_VISIBLE },
    { type: 'radio', key: 'status', label: '菜单状态', options: MENU_STATUS }
  ]
})

export const setMenuOptions = async function(value) {
  menuOptions.value = value
}

export const changeMenuType = async function(value) {
  switch (value) {
    case 0:
      disCode.value = true
      disMenu.value = false
      break
    case 1:
      disCode.value = false
      disMenu.value = true
      break
  }
}
